<template>
  <view class="custom-tabbar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tabbar-item"
      :class="{ active: current === index }"
      @click="switchTab(index)"
    >
      <image :src="current === index ? item.selectedIconPath : item.iconPath" class="tabbar-icon" />
      <text class="tabbar-text">{{ item.text }}</text>
      <view v-if="current === index" class="tabbar-underline"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBar',
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [
        {
          pagePath: '/pages/play/index',
          iconPath: '/static/images/天机阁微信小程序/主页.png',
          selectedIconPath: '/static/images/天机阁微信小程序/选中.png',
          text: '玩啥',
        },
        {
          pagePath: '/pages/shop/index',
          iconPath: '/static/images/天机阁微信小程序/门店未选中.png',
          selectedIconPath: '/static/images/天机阁微信小程序/门店未选中@2x.png',
          text: '门店',
        },
        {
          pagePath: '/pages/message/index',
          iconPath: '/static/images/天机阁微信小程序/消息未选中.png',
          selectedIconPath: '/static/images/天机阁微信小程序/拼车消息@2x.png',
          text: '消息',
        },
        {
          pagePath: '/pages/mine/index',
          iconPath: '/static/images/天机阁微信小程序/我的未选中.png',
          selectedIconPath: '/static/images/天机阁微信小程序/我的未选中@2x.png',
          text: '我的',
        },
      ],
    };
  },
  mounted() {
    this.setCurrentByRoute();
  },
  onShow() {
    this.setCurrentByRoute();
  },
  methods: {
    switchTab(index) {
      if (this.current === index) return;
      this.$emit('change', index);
    },
    setCurrentByRoute() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      let route = currentPage.route || currentPage.$page && currentPage.$page.fullPath || '';
      if (!route.startsWith('/')) route = '/' + route;
      // 兼容分包路径
      route = route.replace(/^(\/)/, '/pages/');
      const idx = this.tabList.findIndex(tab => tab.pagePath === route || route.endsWith(tab.pagePath.replace('/pages', '')));
      if (idx !== -1) {
        this.$emit('change', idx);
      }
    },
  },
};
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 158rpx;
  background: #fff;
  border-radius: 60rpx 60rpx 0 0;
  box-shadow: 0 0 16rpx #dde6cf80;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0 0 0;
  position: relative;
}
.tabbar-icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 4rpx;
}
.tabbar-text {
  font-size: 24rpx;
  color: #c3c7d0;
  margin-bottom: 4rpx;
}
.tabbar-item.active .tabbar-text {
  color: #222;
  font-weight: bold;
}
.tabbar-item.active .tabbar-icon {
  /* 可根据需要加滤镜或其他高亮效果 */
}
.tabbar-underline {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 60rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background: #bfff2a;
}
</style> 